<template>

  <div class="app-container" style="width: 100%;height: auto">
    <customToolbar style="height: 20rem "/>
<!--    <TableReader ref="tablereader" @selectDataSource="showDataSource" />-->
  </div>
</template>

<script>
import { deleteDataGovernance, fetchDataGovernanceList } from '@/api/datagovernance/dataGovernance'
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/permission'
import dataGovernanceForm from './dataGovernanceForm'
import Pagination from '@/components/Pagination'
import customToolbar from '../../../customToolbar/customToolbarForData.vue'
import TableReader from './reader/tableReader.vue'
import { mxGraph } from 'mxgraph-js'
export default {
  name: 'reader',
  components: { dataGovernanceForm, Pagination ,customToolbar,TableReader},
  directives: { waves, permission },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      multipleSelection: [],
      listLoading: false,
      pageArray: this.$store.getters.pageArray,
      listQuery: {
        dataProcessName: undefined,
        status: undefined,
        page: 1,
        limit: this.$store.getters.defaultPageSize
      }
    }
  },
  computed: {
    ids() {
      const ids = []
      this.multipleSelection.forEach(ele => {
        ids.push(ele.id)
      })
      return ids.join(',')
    }
  },
  created() {
    this.getList()
  },
  mounted(){

    // 创建画布
    const graph = new mxGraph(this.$refs.container);
    const parent = graph.getDefaultParent();
    // 开始更新画布
    const v1 = graph.insertVertex(parent, null, '节点1', 20, 20, 80, 30);
    const v2 = graph.insertVertex(parent, null, '节点2', 200, 100, 80, 30);

    // 添加一条连线
    graph.insertEdge(parent, null, '', v1, v2);

  },
  methods: {
    getList() {
      // this.listLoading = true
      fetchDataGovernanceList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        // this.listLoading = false
      })
    },
    handleCreate() {
      this.$refs.form.handleCreate()
    },
    handleUpdate(row) {
      this.$refs.form.handleUpdate(row.id)
    },
    handleDelete(row) {
      this.$confirm('确定删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDataGovernance(row.id).then(response => {
          if (response.data.code === 0) {
            this.getList()
            this.$message.success(response.data.msg)
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleBathDelete() {
      if (this.ids === '') {
        this.$message.warning('请选择至少一条数据')
        return
      }
      this.$confirm('确定删除所选数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDataGovernance(this.ids).then(response => {
          if (response.data.code === 0) {
            this.getList()
            this.$message.success(response.data.msg)
          } else {
            this.$message.error(response.data.msg)
          }
        })
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }

  }
}
</script>
<style >
.span{
  color: #606266;font-weight: 700;font-size: 14px;
}
@import '~bpmn-js/dist/assets/diagram-js.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import '~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
.containers{
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
.canvas{
  width: 100%;
  height: 100%;
}
.bjs-powered-by {
  display: none;
}
}
.customToolbarContainer{
  height: 100%;
}
</style>
../../../customToolbar/customToolbarForData.vue